<!--
 * @Author: 无聊 7989314+Hwz1997@user.noreply.gitee.com
 * @Date: 2025-09-30 09:00:37
 * @LastEditors: 无聊 7989314+Hwz1997@user.noreply.gitee.com
 * @LastEditTime: 2025-09-30 16:21:05
 * @FilePath: \keep_motion_manger\src\components\communityDialog\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: 无聊 7989314+Hwz1997@user.noreply.gitee.com
 * @Date: 2025-07-08 08:35:19
 * @LastEditors: 无聊 7989314+Hwz1997@user.noreply.gitee.com
 * @LastEditTime: 2025-09-26 14:37:39
 * @FilePath: \keep_motion_manger\src\components\importDialog\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-drawer title="帖子详情" size="80%" :model-value="visible" destroy-on-close :before-close="beforeClose">
        <el-collapse v-model="activeNames">
            <el-collapse-item title="基础信息" name="basic">
                <div class="post-basic">
                    <div class="post-basic-item">
                        <img class="post-basic-item-avatar" :src="baseUrl + post.avatar" alt="用户头像">
                        <div class="post-basic-item-right">
                            <span class="post-basic-item-label">{{ post.user_name }}</span>
                            <span class="post-basic-item-time">{{ `发帖时间：${post.create_time.substring(0, 10)}` }}</span>
                        </div>
                    </div>
                    <div class="post-basic-item">
                        <span class="post-basic-item-label">是否置顶:</span>
                        <span class="post-basic-item-value">{{ post.is_top ? '是' : '否' }}</span>
                    </div>
                    <div class="post-basic-item">
                        <span class="post-basic-item-label">帖子内容:</span>
                        <span class="post-basic-item-value">{{ post.content }}</span>
                    </div>
                    <div class="post-basic-item">
                        <el-image class="post-basic-item-img" 
                            :src="baseUrl + post.images[0]" 
                            :zoom-rate="1.2" 
                            :max-scale="7"
                            :min-scale="0.2"
                            :preview-src-list="srcList"
                            show-progress
                            :initial-index="0">
                        </el-image>
                    </div>
                    <div class="post-basic-item">
                        <span class="post-basic-item-topic">{{ post.topic }}</span>
                        <span class="post-basic-item-related" @click="handleClick('sport-activities', post.related_activity)">{{ post.related_activity_title }}</span>
                        <span class="post-basic-item-related" @click="handleClick('courses', post.related_course)">{{ post.related_course_title }}</span>
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item title="喜欢" name="likes">
            </el-collapse-item>
            <el-collapse-item title="评论" name="comments">
            </el-collapse-item>
        </el-collapse>
        <template #footer>
                <span class="dialog-footer">
                    <el-button @click="beforeClose">关闭</el-button>
                </span>
        </template>
    </el-drawer>
</template>

<script setup>

import { ref, reactive, defineProps, defineEmits, computed } from 'vue';
import router from '@/router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'

const baseUrl = import.meta.env.VITE_BASE_URL;
import { communityApi } from '@/api';
import './index.css';

const props = defineProps({
    visible: {
        type: Boolean,
        default: () => false
    },
    post: {
        type: Object,
        default: () => {}
    }
});

const emit = defineEmits(['close']);
const activeNames = ref(['basic', 'likes', 'comments']);

const srcList = computed(() => {
    return props.post.images.map(item => baseUrl + item);
});
// 关闭前
const beforeClose = (done) => {
    emit('close');
};
// 点击相关活动或课程
const handleClick = (name, id) => {
}
</script>